<template>
  <div class="app-container">
    <div class="baidumap" id="allmap"></div>
  </div>
</template>

<script>
  export default {
    name: "pm-distribution",
    components: {},
    data() {
      return {
        visible: null,
        paramNumber: null, //页面跳转传递的厂区号
        list: null,
        flag: true,
        listLoading: true,
      }
    },
    created() {
      this.fetchData();
    },
    mounted() {
      this.initBaiduMap();
    },
    methods: {
      fetchData() {
        this.listLoading = true;
        this.list = [{
            name: '宝珠寺',
            longitude: 105.871266,
            latitude: 31.418535,
            reservoirWaterLevel: 13222225,
            number: 1
          },
          {
            name: '沙溪',
            longitude: 105.944685,
            latitude: 31.622561,
            reservoirWaterLevel: 1325,
            number: 2
          }, {
            name: '亭子口',
            longitude: 105.847123,
            latitude: 31.833036,
            reservoirWaterLevel: 1325,
            number: 3
          }, {
            name: '金银台',
            longitude: 106.049458,
            latitude: 31.549784,
            reservoirWaterLevel: 1325,
            number: 3
          }, {
            name: '红岩子',
            longitude: 106.437709,
            latitude: 31.567653,
            reservoirWaterLevel: 1325,
            number: 3
          }, {
            name: '凤仪',
            longitude: 106.202317,
            latitude: 30.953821,
            reservoirWaterLevel: 1325,
            number: 3
          }, {
            name: '小龙门',
            longitude: 106.103481,
            latitude: 30.769594,
            reservoirWaterLevel: 1325,
            number: 3
          }, {
            name: '青居',
            longitude: 106.111387,
            latitude: 30.681337,
            reservoirWaterLevel: 1325,
            number: 3
          }, {
            name: '东西关',
            longitude: 106.128507,
            latitude: 30.5216,
            reservoirWaterLevel: 1325,
            number: 3
          }
        ]
        this.listLoading = false;
      },

      initBaiduMap() {
        var map = new BMap.Map("allmap", {
          enableMapClick: false,
        }); // 创建地图实例
        this.addAuthorityBoundary(map); // 设置行政边界


        this.addRiverBasins(map); // 添加流域线条等
        this.showInfoMsg(map); // 显示信息
      },
      // 设置地图初始属性
      addAuthorityBoundary(map) {
        var centerPoint = new BMap.Point(104.0668, 30.5728); //成都的经纬度
        map.centerAndZoom(centerPoint, 8); // 初始化地图,设置中心点坐标和地图级别。
        map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
        //设置地图类型控件
        // map.setMapType(BMAP_HYBRID_MAP);
      },
      // 添加箭头线
      addRiverBasins(map) {
        var points = [
          new BMap.Point(104.398251, 30.924897),
          new BMap.Point(104.420673, 30.901599),
          new BMap.Point(104.427572, 30.898128),
          new BMap.Point(104.436195, 30.893666),
          new BMap.Point(104.436195, 30.886724),
          new BMap.Point(104.439645, 30.875318),
          new BMap.Point(104.43677, 30.87479),
          new BMap.Point(104.443669, 30.873335),
          new BMap.Point(104.447694, 30.871847),
          new BMap.Point(104.450999, 30.856596),
          new BMap.Point(104.453012, 30.848411),
          new BMap.Point(104.464797, 30.838737),
        ]; // 坐标点数组，根据需要添加更多的坐标点

        var sy = new BMap.Symbol(BMap_Symbol_SHAPE_FORWARD_OPEN_ARROW, {
          scale: 0.6, //图标缩放大小
          strokeColor: '#fff', //设置矢量图标的线填充颜色
          strokeWeight: '2', //设置线宽
        }); //路线样式！
        var icons = new BMap.IconSequence(sy, '20%', '20%', false);
        var polyline = new BMap.Polyline(points, {
          icons: [icons],
          strokeWeight: 8, // 折线的宽度，以像素为单位
          strokeOpacity: 0, // 折线的透明度，取值范围0 - 1
          strokeColor: '#9ed6ff' // 折线颜色
        }); // 创建箭头线
        map.addOverlay(polyline); // 将箭头线添加到地图上
        // var lushu = new BMapLib.LuShu(map, points, {defaultContent: "", speed: 2000}); // 创建LuShu实例，设置速度为2秒/个坐标点
        // lushu.start(); // 开始流动箭头线的动画效果
      },

      //创建maeker和infowindow
      createMarker(point, iw, paramNumber) {
        var markerx = new BMap.Marker(point);
        //鼠标停留发生的事件
        markerx.addEventListener("mouseover", function(e) {
          this.openInfoWindow(new BMap.InfoWindow(iw));
        });
        //鼠标划出发生的事件
        markerx.addEventListener("mouseout", function(e) {
          this.closeInfoWindow(new BMap.InfoWindow(iw));
        });
        //点击标记发生的事件
        var that = this;
        markerx.addEventListener("click", function(e) {
          // that.$router.push({
          //   path: "点击之后要跳转的路径",
          //   query: {
          //     paramnumber: paramNumber
          //   }//给跳转页面传递的参数
          // });
          console.log("click")
        });
        return markerx;
      },
      showInfoMsg(map) {
        for (var i = 0; i < this.list.length; i++) {
          var point = new BMap.Point(
            this.list[i].longitude,
            this.list[i].latitude
          );
          var infoMessage = `
              ${this.list[i].name}
              <div class='nodate'>今日水位:${this.list[i].reservoirWaterLevel}</div>
              <div class='nodate'>无数据！</div>
              <br>
              <span class='reminder'>点击标记获取更多信息</span>
            `;

          //调用创建marker标记的方法，
          var marker = this.createMarker(
            point,
            infoMessage,
            this.list[i].number,
          );
          map.addOverlay(marker); //添加marker


          // 创建文本标注对象
          var labelopts = {
            position: point, // 指定文本标注所在的地理位置
            offset: new BMap.Size(0, 0) // 设置文本偏移量
          };
          var label = new BMap.Label(this.list[i].name, labelopts);
          //文本标注样式，transform为X轴平移，即文本居中显示
          label.setStyle({
            color: "#fff",
            backgroundColor: "rgba(0, 0, 0, 0.5)",
            borderRadius: "10px",
            padding: "0 10px",
            fontSize: "14px",
            lineHeight: "20px",
            border: "0",
            transform: 'translateX(-50%)'
          });
          //添加文本标注
          map.addOverlay(label);
        }


      },
    }
  };
</script>
<style>
  .baidumap {
    width: 100%;
    /* height: 650px; */
    height: 85vh
  }

  /* 去除百度地图版权那行字 和 百度logo */
  .baidumap>.BMap_cpyCtrl {
    display: none !important;
  }

  .baidumap>.anchorBL {
    display: none !important;
  }

  /* 弹出框中标题样式 */
  .title {
    color: darkgreen;
    text-align: center;
    height: 10px;
  }

  /* 弹出框中提示“无数据”的样式 */
  .nodate {
    color: dimgrey;
    text-align: center;
  }

  /* 弹出框底部的点击提示样式 */
  .reminder {
    font-size: 12px;
    color: darkcyan;
    margin-left: 100px;
  }
</style>
